::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 4px;

  &:hover {
    background-color: rgba(0, 0, 0, 0.3);
  }

  &:active {
    background-color: rgba(0, 0, 0, 0.4);
  }
}

// 当滚动条处于悬停状态时显示
::-webkit-scrollbar-thumb:vertical:hover,
::-webkit-scrollbar-thumb:horizontal:hover {
  background-color: rgba(0, 0, 0, 0.3);
}

// Firefox 滚动条样式
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}